{extend name="base"/}
{block name="content"}
<div id="header-frame">
    {include file="public:top" /}
    <script type='text/javascript' src='__STATIC__/admin/uploadajax/js/jquery-2.0.3.min.js'></script>
    <script type='text/javascript' src='__STATIC__/admin/uploadajax/js/jquery.form.js'></script>
    <link href="__STATIC__/admin/uploadajax/css/style.css" type="text/css" rel="stylesheet"/>
</div>
<div id="frame-body">
    <div id="menu-frame" style="width: 100%;float: left;">
        {include file="public:menu" /}
    </div>
    <div id="main-frame" style="float: left;">
        <div id="dcMain" style="margin-left: 20px;width: 1682px;">
            <!-- 当前位置 -->
            <div id="urHere">管理中心<b>></b><strong>Banner</strong> </div>   <div id="manager" class="mainBox" style="height:auto!important;height:550px;min-height:550px;">
            <h3>修改Banner</h3>

            <h3>
                {foreach name="bannerdata" item="vo"}
                <a href="{:url('admin/banner/index')}?pid={$vo['banner_id']}" {if condition="$arr['banner']['banner_id']==$vo['banner_id']"} class="actionBtn" {else /} class="actionBtn" {/if}>{$vo['banner_name']}</a>
                {/foreach}
            </h3>
            <style>
                .tableOnebor{
                    position: relative;
                }
                tr{
                    height: 40px;
                }

                .tableBasic td{
                    border-right: 1px dotted #CCCCCC;
                }
                .btn{
                    width: 100px;
                    height: 40px;
                }
                .tableBasic .tableOnebor .operation-a{
                    margin: 0 auto;
                    display:inline-block;
                    padding: 0 10px;
                    height: 24px;
                    line-height: 24px;
                    font-size: 12px;
                    color: #ffffff;
                    background: #009E94;
                    border-radius: 10px;
                    margin-right: 5px;
                }
                .mask{
                    position: absolute;
                    top:41px;
                    left: 55px;
                    width: 445px;
                    height: 500px;
                    background: rgba(255,255,255,1);
                    z-index: 10;
                    display: none;
                    text-align: center;

                }
                .hide{
                    margin: 0 auto;
                    display:inline-block;
                    padding: 0 10px;
                    height: 24px;
                    line-height: 24px;
                    font-size: 12px;
                    color: #ffffff;
                    background: #009E94;
                    border-radius: 10px;
                    margin-right: 5px;
                    cursor:pointer;
                    vertical-align: bottom;
                }
            </style>
            <table width="100%" border="0" cellpadding="8" cellspacing="0" class="tableBasic">
                <tr>
                    <th>添加{$arr['banner']['banner_name']}轮播图</th>
                </tr>
                <tr>
                    <td align="center" width="350" valign="top">
                        <form id='myupload' action="{:url('banner/uploadifyImg')}" method='post' enctype='multipart/form-data'>
                            <table width="100%" border="0" cellpadding="8" cellspacing="0" class="tableOnebor">
                                <tr>
                                    <td style="padding-left: 20px;" align="left"><b>首页轮播图名称</b>
                                        <input type="text" id="bitem_name" name="bitem_name" value="{$arr['bitem_name']}" size="20" class="inpMain" />
                                        <div  class="mask">
                                            <table width="100%" border="0" cellpadding="8" cellspacing="0" class="tableBasic" _level="1">
                                                <tr bgcolor="#FBFBFB" level="1">
                                                    <th  align="center">分类名称</th>
                                                </tr>
                                                {foreach name="type_arr" item="vo"}
                                                <tr bgcolor="#FFFFFF" class="1" id="{$vo['protype_id']}">
                                                    <td  align="left"><img class="addddd" src="__STATIC__/admin/images/menu_plus.gif" _id="0" onclick="rowClicked({$vo['protype_id']}) "/><span>{$vo['protype_name']}</span></td>
                                                    <td><a onclick="selection(this)">选取</a></td>
                                                </tr>
                                                {/foreach}
                                            </table>
                                            <a class="hide" onclick="hideMask()">取消</a>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td  style="padding-left: 20px;" align="left"><b class="show" onclick="showMask()">出现</b><span class="showMaskSpan">{$arr['url_action_type']}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="center">
                                        <div style="width:500px;margin:10px auto; border:solid 1px #ddd; overflow:hidden; ">
                                            <!-- <form id='myupload' action="{:url('banner/uploadImg')}" method='post' enctype='multipart/form-data'> -->
                                            <input type="file" id="uploadphoto" name="images" value="请点击上传图片"  style="display:none;" />
                                            <!-- </form> -->
                                            <div class="imglist"><img id="img" src="{$arr['img']}"/> </div>
                                            <input type="hidden" id="bannerm_img" name="bannerm_img" value="{$arr['img']}"/>
                                            <p class="res"></p>
                                            <div class="progress">
                                                <div class="progress-bar progress-bar-striped" ><span class="percent"></span></div>
                                            </div>
                                            <a href="javascript:void(0);" onclick="uploadphoto.click()" class="uploadbtn">点击上传首页轮播图</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="left"  style="padding-left: 20px;"><b>排序</b>
                                        <input type="text" name="bitem_sort" id="bitem_sort" value="{$arr['bitem_sort']}" size="20" class="inpMain" />
                                    </td>
                                </tr>
                                <tr>
                                    <td align="center">
                                        <input type="hidden" name="urlRoute" value="carousel/{$arr['banner_id']}"/>
                                        <input type="hidden" name="banner_id" value="{$arr['banner_id']}"/>
                                        <input type="hidden" name="bitem_id" value="{$arr['bitem_id']}"/>
                                        <input type="hidden" name="action_type" value="" id="action_type"/>
                                        <input type="hidden" name="url_action_type" value="" id="url_action_type"/>
                                        <input type="button" onclick='bannerM_add()' value="提交" class="btn"/>
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </td>
                </tr>
            </table>


        </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function(e) {
            var progress = $(".progress");
            var progress_bar = $(".progress-bar");
            var percent = $('.percent');
            $("#uploadphoto").change(function(){
                $("#myupload").ajaxSubmit({
                    dataType:  'json', //数据格式为json
                    beforeSend: function() { //开始上传
                        progress.show();
                        var percentVal = '0%';
                        progress_bar.width(percentVal);
                        percent.html(percentVal);
                    },
                    uploadProgress: function(event, position, total, percentComplete) {
                        var percentVal = percentComplete + '%'; //获得进度
                        progress_bar.width(percentVal); //上传进度条宽度变宽
                        percent.html(percentVal); //显示上传进度百分比
                    },
                    success: function(data) {
                        console.log(data);
                        if(data.state == 1){
                            var src = data.path;
                            //var attstr= '<img src="'+src+'">';

                            $("#img").attr('src',src);
                            $("#bannerm_img").val(data.path);
                            //$(".res").html("上传图片"+data.name+"成功，图片大小："+data.size+"K,文件地址："+data.url);
                        }else{
                            $(".res").html(data.errmsg);
                        }
                        progress.hide();
                    },
                    error:function(xhr){ //上传失败
                        alert("上传失败");
                        progress.hide();
                    }
                });
            });

        });

        function bannerM_add(){
            var id={$arr['banner_id']};
            var success_url="{:url('admin/banner/index')}?pid="+id;
            var url="{:url('admin/banner/edit')}";
            var admins=$("#myupload").serialize();
            $.post(url,admins,function(result){

                if(result.status=='4')
                {
                    dialog.success(result.message,success_url);
                }else
                {
                    dialog.error(result.message);
                }
            })
        }
        function showMask(){
            $(".mask").show()
        }
        function hideMask(){
            $(".mask").hide()
        }
        function rowClicked(id){
//          	var arr=[parseInt($(that).parents("tr").attr("class"))+1];
//              var trArr=$(that).parents("tr").siblings()
//	        		for(var i=1;i<trArr.length;i++){
//	        			arr.push(parseInt(trArr.eq(i).attr("class")))
//	        		}
//              var maxNum=Math.max.apply(null, arr);
            var MaxNum=parseInt($(".tableBasic").attr("_level"));
            var  _id=$("#"+id).children('td').eq(0).children('img').attr("_id");
            var level = parseInt($("#" + id).attr("class")) + 1;
            if(level==2){
                if(_id==0) {
                    $("#" + id).children('td').eq(0).children('img').attr("_id", "1");

                    $("#" + id).children('td').eq(0).children('img').attr("src", "__STATIC__/admin/images/menu_minus.gif");
                    $("#" + id).siblings().remove("."+level);
                    for(var j=1;j<=MaxNum;j++){
                        if(level==j){
                            var trArr=$("#" + id).siblings();
                            for(var i=0;i<trArr.length;i++){
                                if(parseInt(trArr.eq(i).attr("class"))==level-1){
                                    trArr.eq(i).find("img").attr("src","__STATIC__/admin/images/menu_plus.gif")
                                    trArr.eq(i).find("img").attr("_id","0")
                                }
                            }
                        }
                    }
                    $.ajax({
                        url: "{:url('admin/product_types/getPareArr')}",
                        type: "post",
                        dataType: "json",
                        data: "id=" + id,
                        success: function (res) {
                            var id = res.id;
                            var data = res.data;
                            //alert(level);
                            console.log(level);
                            if (data == "") {
                            } else {
                                $(data).each(function (k, v) {
                                    str = '<tr bgcolor="#FFFFFF" class="' + level + ' tr' + level + '"  id="' + v['protype_id'] + '"><td  style="padding-left:' + level + '0px" align="left"><img  class="addddd" src="__STATIC__/admin/images/menu_plus.gif" _id="0" onclick="rowClicked(' + v['protype_id'] + ')"/><span>' + v['protype_name'] + '</span></td><td><a onclick="selection(this)">选取</a></td>'
                                        + '</tr>';
                                    $("#" + id).after(str);
                                    $(".tableBasic").attr("_level",level);
                                });
                            }
                        }
                    });
                }else
                {
                    $("#" + id).children('td').eq(0).children('img').attr("_id", "0");
                    $("#" + id).children('td').eq(0).children('img').attr("src", "__STATIC__/admin/images/menu_plus.gif");
                    for(var j=1;j<=MaxNum;j++){
                        if(level==j){
                            var trArr=$("#" + id).siblings();
                            for(var i=0;i<trArr.length;i++){
                                if(parseInt(trArr.eq(i).attr("class"))>level-1){
                                    trArr.eq(i).detach()
                                }
                            }
                        }
                    }
                }
            }else if(level==3){
                if(_id==0) {
                    $("#" + id).children('td').eq(0).children('img').attr("_id", "1");

                    $("#" + id).children('td').eq(0).children('img').attr("src", "__STATIC__/admin/images/menu_minus.gif");
                    $("#" + id).siblings().remove("."+level);
                    for(var j=1;j<=MaxNum;j++){
                        if(level==j){
                            var trArr=$("#" + id).siblings();
                            for(var i=0;i<trArr.length;i++){
                                if(parseInt(trArr.eq(i).attr("class"))==level-1){
                                    trArr.eq(i).find("img").attr("src","__STATIC__/admin/images/menu_plus.gif")
                                    trArr.eq(i).find("img").attr("_id","0")
                                }
                            }
                        }
                    }
                    $.ajax({
                        url: "{:url('admin/product/getTypeProducts')}",
                        type: "post",
                        dataType: "json",
                        data: "id=" + id,
                        success: function (res) {
                            console.log(res);
                            if (res == "") {
                            } else {
                                $(res).each(function (k, v) {
                                    str = '<tr bgcolor="#FFFFFF" class="' + level + ' tr' + level + '"  id="' + v['products_id'] + '"><td  style="padding-left:' + level*2 + '0px" align="left"><span>' + v['products_name'] + '</span></td><td><a onclick="selection(this)">选取</a></td>'
                                        + '</tr>';
                                    $("#" + id).after(str);
                                    $(".tableBasic").attr("_level",level);
                                });
                            }
                        }
                    });
                }else
                {
                    $("#" + id).children('td').eq(0).children('img').attr("_id", "0");
                    $("#" + id).children('td').eq(0).children('img').attr("src", "__STATIC__/admin/images/menu_plus.gif");
                    for(var j=1;j<=MaxNum;j++){
                        if(level==j){
                            var trArr=$("#" + id).siblings();
                            for(var i=0;i<trArr.length;i++){
                                if(parseInt(trArr.eq(i).attr("class"))>level){
                                    trArr.eq(i).detach()
                                }
                            }
                        }
                    }
                }
            }

        }
        function selection(that){
            var isProductNum=parseInt($(that).parent().parent().attr("class"))
            console.log(isProductNum)
            var isProductNumVal=$(that).parent().prev().find("span").text()
            var id=$(that).parents('tr').attr('id');

            if(isProductNum==3){
                $(".showMaskSpan").text("产品："+isProductNumVal)
                $("#action_type").val('p'+id);
                $("#url_action_type").val("产品："+isProductNumVal);
            }else{
                $(".showMaskSpan").text("分类："+isProductNumVal)
                $("#action_type").val('t'+id);
                $("#url_action_type").val("分类："+isProductNumVal);
            }
            hideMask()
        }
    </script>
    {/block}